<template>
	<view class="all">
		<block v-for="(item,index) in list">
			<view class="carpall" :style="{
				'background-color':!index?'#F6F6F6':'',
			}">
				<view class="carp">
					<view class="carp_1">
						<view class="carp_1_2">
							<text>{{item.name}}</text>
							<text>{{item.phone}}</text>
						</view>
						<view class="carp_1_3">
							河南省 鄭州市 金水區 {{item.detail}}
						</view>
					</view>
					<image style="width: 32rpx;height: 32rpx;"
						src="https://junhe-project.oss-cn-beijing.aliyuncs.com/img/2022-03-07/164664593918577.png" />
					<view class="carp_2">
						{{$jf('使用','使用')}}
					</view>
				</view>

				<view class="xian">

				</view>
				<view class="carp_3">
					<view class="carp_3_1">
						<image v-if="item.isdefault" src="@/static/img/xz.png" />
						<text v-if="item.isdefault"> {{$jf('已设为默认','已設為默認')}} </text>
						<image v-if="!item.isdefault" @click="mr(item)" src="@/static/img/wxz.png" />
						<text v-if="!item.isdefault" @click="mr(item)">{{$jf('设为默认','設為默認')}} </text>
					</view>
					<view class="carp_3_2" @click.stop="sc(item)">
						{{$jf('删除','刪除')}}
					</view>
				</view>
			</view>
			<u-gap height="10" bg-color="#F4F4F4" v-if="index" />
		</block>
		<view class="foot" @click="show=true">
			{{$jf('新建地址','新建地址')}}
		</view>
		<!-- //弹窗新增地址 -->
		<u-popup v-model="show" mode="bottom">
			<!-- //手机号 -->
			<view class="warp">
				<view class="xj">
					{{$jf('新建地址','新建地址')}}
				</view>
				<view class="warp_1">
					<text>{{$jf('联系人','聯繫人')}}：</text>
					<input type="text" placeholder-class="placeholderclass" v-model="form.name"
						:placeholder="$jf('请输入联系人名称','請輸入聯繫人名稱')" />
				</view>
				<view class="warp_1">
					<text>{{$jf('联系电话','聯系電話')}}:</text>
					<input type="text" placeholder-class="placeholderclass" v-model="form.phone"
						:placeholder="$jf('请输入联系电话:','請輸入聯繫電話:')" />
				</view>
				<view class="warp_1">
					<text>
						{{$jf('所在区域:','所在區域:')}}
					</text>
					<view class="dihi" @click="show1=true">
						<text v-if="!dizhitext">{{$jf('请选择所在区域:','請选择所在區域:')}}</text>
						<text v-else>{{dizhitext}}</text>
						<u-icon color="#999999" size="25" name="arrow-down" />
					</view>
				</view>
				<view class="warp_1">
					<text>{{$jf('详细地址:','詳細地址:')}}：</text>
					<u-input type="textarea" v-model="form.detail" :placeholder-style="styles" border auto-height
						height="136" :placeholder="$jf('请输入详细地址:','請輸入詳細地址：')" />
				</view>
				<view class="foot_1">
					<text @click="show=false">{{$jf('取消','取消')}}</text>
					<text @click="bc">{{$jf('保存地址信息','保存地址信息')}}</text>
				</view>
			</view>
		</u-popup>
		<u-select confirm-color="#00795E" safe-area-inset-bottom :confirm-text="$jf('确认','確認')" @confirm='confirm'
			mode="mutil-column-auto" v-model="show1" value-name='id' label-name='name' :list="listdizhi" />

	</view>
</template>

<script>
	import {
		dizzhi
	} from '@/config/setting.js'
	export default {
		data() {
			return {
				dizhitext: '',
				form: {
					name: '',
					phone: '',
					province_id: '',
					city_id: '',
					region_id: '',
					detail: '',
					isdefault: '',
				}, //添加地址
				dizhi: {},
				info: {},
				styles: "font-size: 24rpx;font-family: Source Han Sans CN;font-weight: 400;color: #999999",
				listdizhi: null,
				show: false,
				show1: false,
			};
		},
		computed: {
			list() {
				if (this.$store.state.ziti == 1) {
					return this.info.simple
				} else {
					return this.info.multiply
				}
			}
		},
		methods: {
			//设置默认地址
			mr(a) {
				this.api('usermsg/default', {
					id: a.id
				}).then(res => {
					this.$toast(res.msg)
				})
			},
			//删除地址
			sc(a) {
				uni.showModal({
					title:this.$jf('提示','提示'),
					content: this.$jf('确定要删除这个地址吗','確定要刪除這個地址嗎')+'?',
					success: (res) => {
						if (res.confirm) {
							this.api('usermsg/addressDel', {
								id: a.id
							}).then(res => {
								this.$toast(res.msg)
							})
						} else if (res.cancel) {}
					}
				});


			},
			// 我的地址
			getinfo() {
				this.api('usermsg/addressLog').then(res => {
					this.info = res.data
				})
			},
			//保存地址
			bc() {
				console.log(this.dizhi)
				let a = this.dizhi
				this.form.province_id = a[0].value
				this.form.city_id = a[1].value
				this.form.region_id = a[2].value
				this.form.isdefault = "1"
				this.api('usermsg/addressAdd', this.form).then(res => {
					this.show = false
					this.toast(res.msg)

				})
			},
			//地址选择
			confirm(a, b) {
				this.dizhi = a
				this.dizhitext = a[0].label + " " + a[1].label + " " + a[2].label
				console.log(a, b)
			},
		},
		onLoad() {
			this.listdizhi = dizzhi[0].data
			this.getinfo()
		}
	}
</script>

<style lang="scss">
	.warp {
		height: 770rpx;
		background: #FFFFFF;
		padding: 30rpx;
		position: relative;

		.foot_1 {
			border-top: 1rpx solid #E5E5E5;
			box-sizing: border-box;
			padding-bottom: 20rpx;
			padding-top: 15rpx;
			position: absolute;
			display: flex;
			justify-content: space-around;
			bottom: 20rpx;
			width: 100%;
			margin: auto;
			transform: translateX(-50%);
			left: 50%;

			text:nth-of-type(1) {
				display: inline-block;
				width: 45%;
				text-align: center;
				line-height: 80rpx;
				height: 80rpx;
				background: #FFFFFF;
				border: 1rpx solid #00795E;
				border-radius: 40rpx;
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #00795E;
			}

			text:nth-of-type(2) {
				height: 80rpx;
				background: #00795E;
				width: 45%;
				border-radius: 40rpx;
				text-align: center;
				line-height: 80rpx;
				display: inline-block;
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
			}

		}

		.xj {
			display: block;
			text-align: center;
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: 600;
			margin-bottom: 30rpx;
			color: #181818;
		}

		.warp_1 {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;

			text {
				font-size: 28rpx;
				width: 22%;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #181818;
			}

			/deep/ .placeholderclass {
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #999999;
			}

			.dihi {
				width: 83%;
				box-sizing: border-box;
				display: block;
				display: flex;
				box-sizing: border-box;
				height: 89rpx;
				padding-left: 30rpx;
				background: #FFFFFF;
				border: 1rpx solid #E1E1E1;

				text {
					width: 90%;
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #999999;
					line-height: 89rpx;
				}
			}

			input {
				box-sizing: border-box;
				height: 89rpx;
				padding-left: 30rpx;
				background: #FFFFFF;
				border: 1rpx solid #E1E1E1;
				width: 83%;
			}
		}

	}

	.foot {
		position: fixed;
		width: 93%;
		left: 50%;
		line-height: 80rpx;
		transform: translateX(-50%);
		text-align: center;
		height: 80rpx;
		background: #00795E;
	bottom: 20rpx;
		border-radius: 40rpx;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
	}

	.all {
		.xian {
			height: 1rpx;
			background: #E5E5E5;
			margin-top: 25rpx;
		}

		.carpall {
			padding: 30rpx;
		}

		.carp_3 {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 30rpx;

			// border: 1rpx solid black;
			.carp_3_2 {
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #999999;
			}

			.carp_3_1 {
				display: flex;
				align-items: center;

				image {
					width: 35.9rpx;
					height: 35.9rpx;
					margin-right: 15rpx;
					border-radius: 100%;
				}

				text {
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #00795E;
				}
			}
		}

		.carp {
			display: flex;
			align-items: center;
			justify-content: space-between;


			.carp_2 {
				text-align: center;
				width: 80rpx;
				height: 40rpx;
				background: #FFFFFF;
				border: 1rpx solid #BFBFBF;
				border-radius: 10rpx;
				font-size: 20rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #666666;
				line-height: 40rpx;
			}

			.carp_1 {
				width: 80%;

				.carp_1_3 {
					margin-top: 20rpx;
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
				}

				.carp_1_2 {
					text:nth-of-type(1) {
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: bold;
						color: #181818;
					}

					text:nth-of-type(2) {
						margin-left: 20rpx;
						font-size: 22rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: #333333;
					}
				}
			}
		}
	}
</style>
